<mat-form-field fxFlex
                [formGroup]="formGroup">
  <div *ngIf="config.icon"
       matPrefix>
    <mat-icon [svgIcon]="config.icon"></mat-icon>&nbsp;
  </div>
  <mat-label>{{ config.label | translate }}</mat-label>
  <textarea *ngIf="config.rows > 1"
            matInput
            [ngClass]="{'omv-text-monospace': config.monospace}"
            [formControlName]="config.name"
            [placeholder]="config.placeholder | translate"
            [readonly]="config.readonly"
            [autofocus]="config.autofocus"
            [required]="config.validators?.required"
            [minlength]="config.validators?.minLength"
            [maxlength]="config.validators?.maxLength"
            [wrap]="config.wrap"
            [rows]="config.rows"
            [cols]="config.cols"
            spellcheck="false">
  </textarea>
  <input *ngIf="config.rows === 1"
         matInput
         type="text"
         [ngClass]="{'omv-text-monospace': config.monospace}"
         [formControlName]="config.name"
         [placeholder]="config.placeholder | translate"
         [readonly]="config.readonly"
         [autofocus]="config.autofocus"
         [autocomplete]="config.autocomplete"
         [required]="config.validators?.required"
         [minlength]="config.validators?.minLength"
         [maxlength]="config.validators?.maxLength">
  <input type="file"
         [accept]="config.accept"
         (change)="onChange($event)">
  <mat-error *ngIf="formGroup.invalid">
    <span *ngIf="formGroup.hasError('required', config.name)"
          translate>
      This field is required.
    </span>
    <span *ngIf="formGroup.hasError('minlength', config.name)"
          translate>
      The value must be at least {{ config.validators.minLength }} characters long.
    </span>
    <span *ngIf="formGroup.hasError('maxlength', config.name)"
          translate>
      The value cannot exceed {{ config.validators.maxLength }} characters.
    </span>
    <span *ngIf="formGroup.hasError('constraint', config.name)">
      {{ formGroup.getError('constraint', config.name) | translate }}
    </span>
    <span *ngIf="formGroup.hasError('pattern', config.name)">
      {{ formGroup.getError('pattern', config.name) | translate }}
    </span>
  </mat-error>
  <mat-hint *ngIf="config.hint?.length > 0"
            [innerHTML]="config.hint | translate | sanitizeHtml">
  </mat-hint>
</mat-form-field>
